<template>
    <div class="component-root-container">
      <el-header>
        <el-form
          ref="contractRule"
          :rules="contractRule"
          :model="headerCheck"
          label-width="120px"
          label-position="right"
        >
          <el-row >
            <el-col :span="8">
              <el-form-item
                label="订单编号:"
                prop="requestId">
                <el-input
                  v-model="headerCheck['requestId']"
                  placeholder="请输入订单编号"
                          @input="change($event)"
                  clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="col_button">
              <div class="button">
                <el-button class="query" @click="buttonClick">查询</el-button>
                <el-button class="query" @click="reset">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-header>
      <el-main>
          <div class="contentInfo" style="margin-bottom:20px;" v-show="showSence">
              <el-row>
                <el-col class="header-title">
                  <span class="header-vertical"/>
                  场景使用情况
                </el-col>
              </el-row>
              <el-row>
                  <div class="inline">
                      <div><span>调用次数/日：</span><span>{{ query.count }}</span></div>
                      <div><span>拦截比率：</span><span>{{ query.rate }}</span></div>
                      <div><a class="link" href="javascript:;" @click="$router.push({name:'biz-ml'})">详情</a></div>
                  </div>
              </el-row>
          </div>
          <div class="contentInfo" style="margin-bottom:20px;">
              <el-row>
                <el-col class="header-title">
                  <span class="header-vertical"/>
                  场景说明
                </el-col>
              </el-row>
              <el-row>
                  <div class="page-tip">
                      <div class="description">在进行集中操作服务终止时,检查该订单编号对应站址下是否存在拆站流程,若已完成拆站流程审批且推送至CRM,则认为是拆站导致的服务终止。</div>
                  </div>
          <div class="page-tip">
            <div class="params-tip"><span>示例参数</span>：订单编号：1116013102522447</div>
          </div>
              </el-row>
          </div>
        <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            校验返回信息
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              <div v-show="notAvailable.requestId">订单编号: {{notAvailable.requestId}} </div>
              <el-row v-show="notAvailable.returnMsg">
                <el-col>结果: {{notAvailable.returnMsg || ""}}</el-col>
              </el-row>
            </div>
          </div>
        </el-row>
      </div>
      </el-main>
    </div>
  </template>
  
  <script>
  export default {
    data () {
      return {
        listLoading: false,
        showSence: true,
        query:{
          count:0,
          rate:'--'
        },
          headerCheck: {
          requestId: ''
        },
        contractRule: {
          requestId: [
            { required: true, message: '请输入订单编号', trigger: 'blur' }
          ]
        },
        hiddenTableHeader: false,
        notAvailable: {
          requestId: '',
          returnMsg: ''
        }, // 查询接口返回的检验信息
      }
    },
    created () {
      this.queryPageCount('2.12');
    },
    mounted () {},
    methods: {
      async buttonClick () {
        this.listLoading = true
        try {
          await this.$refs['contractRule'].validate()
          const data = {
            requestId: this.headerCheck.requestId,
            serialNumbe: '*',
            terminationReason: '*'
          }
          const r = await this.$http({
            url: this.$http.adornBizUrl('/dismantling/check'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify(data), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if (r.data.data.length > 0) {
            this.notAvailable.requestId = r.data.data[0].requestId
            this.notAvailable.returnMsg = r.data.data[0].returnMsg || '';
          }
        } catch (e) {
          console.log(e)
              this.listLoading = false
        } finally {
          this.listLoading = false
        }
      },
      reset () {
        this.headerCheck = {
          requestId: ''
        }
        this.notAvailable = {
          requestId: '',
          returnMsg: ''
        },
            this.listLoading = false
            this.$refs['contractRule'].clearValidate()
      },
      change(e){
        this.$forceUpdate()
      },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if(r.data.data && r.data.data.length >0){
            var result = r.data.data[0];
            this.query.count=result.cnt||'0';
            this.query.rate=(result.per==null?'--': (result.per*100).toFixed(1)+'%');
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
    @import "../../../assets/scss/_formatQueryPage";
    @include formatQueryPage(0, 60%, left);
    .el-input {
      width: 60%;
    }
  
    .query {
      color:rgba(255,255,255,1);
      background:rgba(235,75,75,1);
      border-radius: 6px;
    }
  
    .table-bottom {
      margin-bottom: 15px;
    }
    
    div.inline{
      border:1px solid #e7e7e7;
      height:40px;
      line-height:40px;
      padding:0 10px;
    }
    .inline > div{
      width:200px;
        display:inline-block;
    }
    a.link{
      color:rgba(235,75,75,1);
      font-weight:550;
    } 
  </style>
  